<template>
  <div class="component_container">
    <!-- 组件创建模板  -->
  </div>
</template>

<script>
import {
  ref,
  reactive,
  watch,
  computed,
  getCurrentInstance,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "",
  props: {
    demo: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    // ------------------ 通用属性 start --------------------
    const { proxy } = getCurrentInstance();
    const $api = proxy.$api;
    const router = useRouter();
    const store = useStore();
    // ------------------ 通用属性 end ----------------------

    const demoVar = ref(false);
    const demoArr = reactive([]);

    /**
     * 计算属性
     */
    const userInfo = computed(() => store.state.user.userInfo);

    /**
     * 属性监听
     */
    watch(
      () => props.demo,
      (newVal) => {
        ElMessage.success("this is a demo !");
      }
    );

    const demoMtd = () => {};

    /**
     * 组件钩子
     */
    onMounted(() => {});

    return {
      demoVar,
      demoArr,
      userInfo,
      demoMtd,
    };
  },
};
</script>

<style lang="less" scoped>
.component_container {
}
</style>
